<ui:composition template="../principal.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="principal">
        <h2>Configurações da Clínica</h2>

        <h:form id="breadcrumb">
            <p:breadCrumb styleClass="navegacao" style="margin-top: 5px; margin-bottom: 40px">  
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'AD'}" >  
                    <p:menuitem value="Categories" url="../user-master/menuMaster.xhtml" />  
                </c:if>
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'DE'}" >  
                    <p:menuitem value="Categories" url="../user-simple/menuDentista.xhtml" />  
                </c:if>
                <p:menuitem value="Clínica" url="../clinica/adminClinica.xhtml" />  
                <p:menuitem value="Configuração da Clínica" url="configuracaoClinica.xhtml" />
            </p:breadCrumb>
        </h:form>
        
        <h:form id="cad">
            <p:growl id="message"/>
            <p:fieldset legend="DADOS CADASTRAIS" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="2" styleClass="table-form" cellspacing="10"> 
                    <h:outputLabel for="nome" value="*Nome: " />  
                    <p:inputText id="nome" title="nome" value="#{configuracaoClinicaMB.clinica.nome}" required="true" label="Nome" size="40" />
                    <h:outputLabel for="cnpj-cpf" value="*CNPJ/CPF: " />  
                    <p:inputText id="cnpj-cpf" title="cnpj-cpf" value="#{configuracaoClinicaMB.clinica.cnpj_cpf}" required="true" label="CNPJ/CPF" size="30"/>
                </h:panelGrid>
            </p:fieldset>

            <p:fieldset legend="ENDEREÇO" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="4" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="logradouro" value="*Logradouro: " />  
                    <p:inputText id="logradouro" title="logradouro" value="#{configuracaoClinicaMB.clinica.endereco.logradouro}" required="true" label="Logradouro" size="80"/> 
                    <h:outputLabel for="numero" value="*Numero: " />  
                    <p:inputText id="numero" title="numero" value="#{configuracaoClinicaMB.clinica.endereco.numero}" required="true" label="Numero" size="5"/>
                </h:panelGrid>

                <h:panelGrid columns="6" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="complemento" value="Complemento: " />  
                    <p:inputText id="complemento" title="complemento" value="#{configuracaoClinicaMB.clinica.endereco.complemento}" required="false" label="Complemento" size="30"/>
                    <h:outputLabel for="bairro" value="*Bairro: " />  
                    <p:inputText id="bairro" title="bairro" value="#{configuracaoClinicaMB.clinica.endereco.bairro}" required="true" label="Bairro" size="30"/>
                    <h:outputLabel for="cep" value="*CEP: " />  
                    <p:inputMask id="cep" title="cep" value="#{configuracaoClinicaMB.clinica.endereco.cep}" required="true" mask="99999-999"/>
                </h:panelGrid>

                <h:panelGrid columns="4" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="uf" value="*UF: " />  
                    <p:selectOneMenu id="uf" value="#{configuracaoClinicaMB.clinica.endereco.uf}" effect="fade" required="true" label="UF" style="width: 160px;" panelStyle="font-size: 12px;">  
                        <f:selectItems value="#{configuracaoClinicaMB.estados}" var="uf" itemLabel="#{uf}" itemValue="#{uf}" />
                    </p:selectOneMenu>
                    <h:outputLabel for="cidade" value="*Cidade: " />  
                    <p:inputText id="cidade" title="cidade" value="#{configuracaoClinicaMB.clinica.endereco.cidade}" required="true" label="Cidade" size="30"/>
                </h:panelGrid>
            </p:fieldset>

            <p:fieldset legend="CONTATO" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="4" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="email" value="*Email: " />  
                    <p:inputText id="email" title="email" value="#{configuracaoClinicaMB.clinica.contato.email}" required="true" label="Email" size="50"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel for="telefone" value="*Telefone fixo: " />  
                    <p:inputMask id="telefone" title="telefone" value="#{configuracaoClinicaMB.clinica.contato.telefone}" required="true" mask="(99)9999-9999"/>
                    <h:outputLabel for="celular" value="Celular: " />  
                    <p:inputMask id="celular" title="celular" value="#{configuracaoClinicaMB.clinica.contato.celular}" required="false" mask="(99)9999-9999"/>
                </h:panelGrid>
            </p:fieldset>

            <p:fieldset legend="LOGO DA CLÍNICA" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="2" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="foto-atual1" value="Logo 1 Atual: " />
                    <h:graphicImage id="foto-atual1" library="clinica" name="#{configuracaoClinicaMB.clinica.logo}" class="img-clinica" alt="LOGO1"/>
                </h:panelGrid>
                <h:panelGrid columns="2" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="foto-atual2" value="Logo 2 Atual: " />
                    <h:graphicImage id="foto-atual2" library="clinica" name="#{configuracaoClinicaMB.clinica.logo2}" class="img-clinica" alt="LOGO2"/>
                </h:panelGrid>

                <p:separator/>
                
                <h:panelGrid columns="2" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="tipo-logo" value="*Tipo da Logo: " />
                    <p:selectOneMenu id="tipo-logo" value="#{configuracaoClinicaMB.tipologo}">  
                        <f:selectItem itemLabel="Selecione..." itemValue="nada" />  
                        <f:selectItem itemLabel="Logo 1" itemValue="logo1" />
                        <f:selectItem itemLabel="Logo 2" itemValue="logo2" />
                        <p:ajax event="change" update="foto1" />
                    </p:selectOneMenu>
                </h:panelGrid>
                <h:outputLabel for="foto1" value="Logo da Clínica: " />
                <p:fileUpload update=":cad:foto-atual1, :cad:foto-atual2" id="foto1" fileUploadListener="#{configuracaoClinicaMB.fileUploadAction}" mode="advanced" sizeLimit="100000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" 
                              uploadLabel="Enviar" cancelLabel="Cancelar" invalidFileMessage="Arquivo não permitido." invalidSizeMessage="Tamanho de imagem não suportada." label="Escolher" />
            </p:fieldset>


            <h:panelGrid columns="1" style="text-align: right; width: 100%;">
                <p:commandButton value="Salvar" update=":cad" action="#{configuracaoClinicaMB.salvarClinica()}" image="ui-icon ui-icon-disk" style="font-size: 15px;" />
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>